<template>
  <div class="page-container-padding" style="display: flex">
    <!-- 左侧填写数据 -->
    <div>
      <div class="week-text">
        <span>{{ currentWeek.substring(0, 14) }}</span>
        <span class="week">{{ currentWeek.substring(14, 15) }}</span>
        <span style="float: right">
          <el-button type="infor" size="mini" @click="toGetLastDay">
            上日模板
          </el-button>
        </span>
      </div>
      <!-- 操作提示 -->
      <div style="color: #f13b00">
        <p>1、如确需换行才使用`Enter`键换行，因为每个换行排版将是另起一段。</p>
        <p>2、编辑框右下角可拉动改变高度。</p>
        <p>
          3、点击上一日可使用上日的数据来修改，保存的数据日期始终是今日【{{
            currentDate
          }}】
          <el-button
            style="float: right"
            size="mini"
            type="primary"
            :loading="saveLoading"
            @click="toSaveRefrence"
          >
            确认保存
          </el-button>
        </p>
      </div>
      <!-- 填写 -->
      <div class="edit-container">
        <div
          v-for="item in varietyList"
          :key="item.variety_en"
          class="refrence-item"
        >
          <div class="item-title">
            <span class="item-dot"></span>
            <span class="item-text">{{ item.variety_name }}</span>
          </div>
          <div class="item-input">
            <el-input
              v-model="item.reference_text"
              show-word-limit
              type="textarea"
              maxlength="1500"
              :rows="9"
              placeholder="在这里填写品种晨会纪要"
              style="font-size: 15px; line-height: 20px;"
            ></el-input>
          </div>
        </div>
        <div style="text-align: center">
          <el-button
            type="primary"
            style="height: 40px"
            :loading="saveLoading"
            @click="toSaveRefrence"
          >
            确定保存
          </el-button>
        </div>
      </div>
    </div>
    <!-- 右侧显示今日已存的数据 -->
    <div class="today-container">
      <div class="week-text">今日晨会纪要</div>
      <div>
        <div v-if="todayRefrence.length > 0">
          <div
            v-for="item in todayRefrence"
            :key="item.variety_en"
            class="refrence-item"
          >
            <div class="item-title">
              <span class="item-dot"></span>
              <span class="item-text">{{ item.variety_name }}</span>
            </div>
            <div class="item-refrenece">
              <div v-for="(p, i) in item.reference.split('\n')" :key="i">
                <div>{{ p }}</div>
              </div>
            </div>
          </div>
        </div>
        <div v-else>
          <el-empty description="今日还未填写晨会纪要"></el-empty>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  const NAME_SPACE = 'V05' // 晨会
  import { getDateWeek, datetimeToStr } from '@/utils/datetimeUtils'
  import { getUserAuthVariety } from '@/api/operations/variety'
  import {
    CreateEarlyReference,
    GetEarlyReference,
  } from '@/api/departmentWork/periodReport'
  export default {
    data() {
      return {
        currentWeek: '',
        currentDate: '',
        varietyList: [],
        saveLoading: false,
        todayRefrence: [],
      }
    },
    mounted() {
      this.currentWeek = getDateWeek(new Date())
      this.currentDate = datetimeToStr(new Date(), true, '')
      this.getVariety()
      setTimeout(() => {
        this.getCurrentData()
      }, 800)
    },
    methods: {
      // 查询用户今日已填写的数据
      getCurrentData() {
        this.todayRefrence = []
        GetEarlyReference(this.currentDate).then((res) => {
          res.data.forEach((ele) => {
            ele.data.forEach((v) => {
              if (v.reference && v.reference.length > 0) {
                this.todayRefrence.push(v)
              }
            })
          })
          this.todayRefrence.map((ele) => {
            this.varietyList.forEach((v) => {
              if (v.variety_en === ele.variety_en) {
                v.reference_text = ele.reference // 若有填写了就写进input
              }
            })
          })
        })
      },

      // 获取上一日的数据, 目的是作为模板
      toGetLastDay() {
        const year = parseInt(this.currentWeek.substring(0, 4))
        const month = parseInt(this.currentWeek.substring(5, 7))
        const day = parseInt(this.currentWeek.substring(9, 11))
        const preDate = new Date(
          new Date(year, month - 1, day).getTime() - 24 * 60 * 60
        )
        this.currentWeek = getDateWeek(preDate)
        const targetDateString = datetimeToStr(preDate, true, '')
        // 获取该日的数据
        GetEarlyReference(targetDateString).then((res) => {
          let tempData = []
          res.data.forEach((ele) => {
            ele.data.forEach((v) => {
              if (v.reference && v.reference.length > 0) {
                tempData.push(v)
              }
            })
          })
          // 填input
          this.varietyList.forEach((v) => {
            v.reference_text = ''
            tempData.forEach((t) => {
              if (v.variety_en === t.variety_en) {
                v.reference_text = t.reference // 若有填写了就写进input
              }
            })
          })
        })
      },

      // 查询用户有权限的报告品种
      getVariety() {
        getUserAuthVariety({ space: NAME_SPACE }).then((res) => {
          this.varietyList = res.data.map((ele) => {
            return {
              variety_en: ele.variety_en,
              variety_name: ele.variety_name,
              reference_date: this.currentDate,
              reference_text: '',
            }
          })
        })
      },

      // 保存晨会纪要
      toSaveRefrence() {
        this.saveLoading = true
        let dataList = []
        for (let i = 0; i < this.varietyList.length; i++) {
          let ele = this.varietyList[i]
          if (ele.reference_text.length > 0) {
            dataList.push({
              variety_en: ele.variety_en,
              create_date: ele.reference_date,
              reference: ele.reference_text,
            })
          }
        }
        if (dataList.length < 1) {
          this.$baseMessage('还没填写任何信息!', 'error')
          return
        }
        CreateEarlyReference(dataList)
          .then((res) => {
            this.getCurrentData()
            this.$baseMessage(res.msg, 'success')
            this.saveLoading = false
          })
          .catch(() => {
            this.saveLoading = false
          })
      },
    },
  }
</script>
<style scoped lang="scss">
  .week-text {
    font-size: 16px;
    font-weight: 700;
    height: 30px;
    line-height: 30px;
    margin-bottom: 10px;
    .week {
      background-color: #349cfc;
      color: #fff;
      border-radius: 50%;
      line-height: 30px;
      padding: 2px 5px;
      margin-left: 3px;
    }
  }
  .item-title {
    margin-bottom: 4px;
    line-height: 26px;
    .item-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #fe6814;
    }
    .item-text {
      font-size: 18px;
      font-weight: 700;
      padding-left: 8px;
    }
  }
  .edit-container {
    width: 600px;
    .refrence-item {
      .item-input {
        padding-left: 16px;
        margin-bottom: 22px;
      }
    }
  }
  .today-container {
    margin-left: 50px;
    border-left: 1px solid #efefef;
    padding-left: 50px;
    .item-refrenece {
      font-size: 16px;
      margin-left: 16px;
      text-indent: 2em;
      margin-bottom: 22px;
      padding: 10px;
      border: 1px solid #ececec;
      line-height: 26px;
      border-radius: 3px;
      &:hover {
        box-shadow: 0px 0px 1px 1px #51b2f3;
        color: #000;
      }
    }
  }
</style>
